<script setup>

// 定义页面初始数据
import ToDoHeader from './components/ToDoHeader.vue'
import ToDoMain from './components/ToDoMain.vue'
import ToDoFooter from './components/ToDoFooter.vue'

// 通过import语法导入ref模块，导入后即可使用ref()函数来创建响应式数据
import {ref, computed} from 'vue'
const list = ref([
  {
    id: 1,
    name: '晨练',
    done: false,
  },{
    id: 2,
    name: '练书法',
    done: true,
  }
])

//添加任务
const addTodo = name => {
  list.value.push({
    name,
    done: false,
    // ~~ 是一种常见的快速取整方式，可以替换成 Math.floor() 进行取整操作
    // Math.random()，它返回一个0到1之间的随机数。然后将这个随机数乘以1000，再取整数部分，即可得到一个范围在0到999之间的整数作为唯一标识符。
    id: ~~(Math.random() * 1000)
  })
}

//删除任务
const delToDo = id =>{
  list.value = list.value.filter(item => item.id !==id)
}

//计算未完成任务条数
const lastLength = computed(() => {
  return list.value.filter(item => !item.done).length
})

//定义页面的使用一个任务状态状态属性status
const status = ref('all')

//定义showList()方法，展示不同任务状态下的任务数量,通过filte()方法进行数据过滤
const showList = computed (() => {
  if (status.value === 'all') {
    return list.value
  }
  if (status.value === 'active') {
    return list.value.filter( item => !item.done)
  }
  if (status.value === 'completed') {
    return list.value.filter(item => item.done)
  }
})



//定义updateStatus()方法,用来更新状态

//status1名字不能有冲突
const updateStatus = status1 => {
  status.value = status1 //将子组件的状态赋值给父组件
}
const props = defineProps(['status'])
</script>


<template>
  <ToDoHeader @addTodo="addTodo" />
  <ToDoMain :list="showList" @delToDo="delToDo" />
  <!-- 将自定义属性传给ToDoFooter组件 -->
  <ToDoFooter :lastLength="lastLength" :status="status" @updateStatus="updateStatus" />
  
</template>

<style scoped>

</style>
